import { connect } from 'dva';
import { Icon } from 'antd';
import router from 'umi/router';
import Rectangle from './Rectangle';
import styles from '../index.less';
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_1235632_bphjv9qycag.js',
});
function Preview(props) {
  console.log(props.person);
  const {
    name,
    overview,
    chineseName,
    birthDate,
    englishName,
    deathDate,
    alias,
    college,
    nationality,
    career,
    nation,
    represent,
    birthPlace,
    achievement,
    lifetime,
    evaluation,
    imageUrl,
  } = props.person.previewData;
  return (
    <div style={{ margin: 20 }}>
      <a>
        <IconFont type="icon-back" style={{ fontSize: 40 }} onClick={() => router.goBack(1)} />
      </a>
      <div className={styles.preview_container}>
        <div>
          {/* <Rectangle color="green" title={name}/> */}
          <h1 style={{fontSize:30}}>{name}</h1>
        </div>
        <div>
          <Rectangle color='#FFD700' title="人物概述" />

          <div className={styles.preview_desc} style={{ minHeight: 180 }}>
            <img
              src={imageUrl}
              style={{ width: 180, height: 180, float: 'left', marginRight: 10 }}
            />
            {overview && overview.map((item, index) => <p key={index}>{item.desc}</p>)}
          </div>
        </div>
        <div style={{ clear: 'both' }}>
          <Rectangle color="#ADFF2F" title="基本信息" />
          <div style={{ display: 'flex', flexWrap: 'wrap' }} className={styles.preview_desc}>
            <p className={`${styles.border} ${styles.width}`}>
              <span className={styles.align_right}>中文名：</span>
              {chineseName}
            </p>
            <p className={`${styles.border} ${styles.width}`}>
              <span className={styles.align_right}>出生日期：</span>
              {birthDate}
            </p>
            <p className={`${styles.border} ${styles.width}`}>
              <span className={styles.align_right}>英文名：</span>
              {englishName}
            </p>
            <p className={`${styles.border} ${styles.width}`}>
              <span className={styles.align_right}>逝世日期：</span>
              {deathDate}
            </p>
            <p className={`${styles.border} ${styles.width}`}>
              <span className={styles.align_right}>别名：</span>
              {alias}
            </p>
            <p className={`${styles.border} ${styles.width}`}>
              <span className={styles.align_right}>毕业院校：</span>
              {college}
            </p>
            <p className={`${styles.border} ${styles.width}`}>
              <span className={styles.align_right}>国籍：</span>
              {nationality}
            </p>
            <p className={`${styles.border} ${styles.width}`}>
              <span className={styles.align_right}>职业：</span>
              {career}
            </p>
            <p className={`${styles.border} ${styles.width}`}>
              <span className={styles.align_right}>民族：</span>
              {nation}
            </p>
            <p className={`${styles.border} ${styles.width}`}>
              <span className={styles.align_right}>代表作品：</span>
              {represent}
            </p>
            <p className={`${styles.border} ${styles.width}`}>
              <span className={styles.align_right}>出生地：</span>
              {birthPlace}
            </p>
            <p className={`${styles.border} ${styles.width}`}>
              <span className={styles.align_right}>主要成就：</span>
              {achievement}
            </p>
          </div>
        </div>
        <div>
          <Rectangle color="#9370DB" title="人物生平" />
          {lifetime.map((item, index) => (
            <div key={index}>
              <h4 className={styles.preview_desc}>{item.title}</h4>
              <p className={styles.preview_lifetime}>{item.desc}</p>
            </div>
          ))}
        </div>
        <div>
          <Rectangle color="#54FF9F" title="社会评价" />
          <div className={styles.preview_desc}>{evaluation}</div>
        </div>
      </div>
    </div>
  );
}

export default connect(({ person }) => ({ person }))(Preview);
